<template>
  <div>
    <div class="navbar-container">
      <NavBar />
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap"

export default {
  components: {
    NavBar 
  },
  setup() {
    // 监听滚动事件
    let lastScrollTop = 0; // 保存上一次滚动位置

    window.addEventListener("scroll", () => {
      const navbar = document.querySelector(".navbar-container");
      if (navbar) {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (scrollTop > lastScrollTop) {
          // 向下滚动
          navbar.classList.add("scrolled");
        } else {
          // 向上滚动
          navbar.classList.remove("scrolled");
        }
        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // 更新上一次滚动位置
      }
    });

  }
}
</script>

<style>
/* 添加一个新的样式规则 */
.scrolled {
  opacity: 0.5; /* 滚动时的透明度 */
  transform: translateY(-100%); /* 向上收起 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  opacity: 1; /* 原始透明度 */
  transition: all 0.3s ease; /* 添加相同的过渡效果 */
}
</style>
